<template>
    <view class="content">
        <maskCom ref="child"></maskCom>
        <view class="imgBJ">
            <view class="flexFS" style="position: absolute;z-index: 999;top: 70rpx;left: 20rpx;width: 400rpx;">
                <view class style="width: 100rpx;height: 100rpx ;overflow: hidden;margin-right: 20rpx;border-radius: 50%;">
                    <!-- <image :src="avatar" mode="" style="height: 100rpx;width: 100rpx;"></image> -->
                    <u-avatar :src="avatar" shape="circle" size="55"></u-avatar>
                </view>
                <view class>{{ name }}</view>
            </view>
            <!-- 	<image v-if="first_frame" :src="first_frame" mode="scaleToFill" style="height: 100%;width: 100%;"></image> -->
            <video :src="url" @timeupdate="checkCurrentTime" id="myVideo" style="height: 100%; width: 100%;" v-if="datas.fee == '0.00'"></video>
            <view id="xxl" style="text-align: center;margin-top: 35%;" v-else>请点击下载APP</view>
        </view>

        <view class="contentBox">
            <view @click="downloadFun" class="btnBox downloadBox" id="xxl">下载APP看完整内容</view>
        </view>
    </view>
</template>

<script>
import maskCom from '@/components/maskCom.vue'
import { getInfo } from '@/api/index.js'
export default {
    components: {
        maskCom,
    },
    data() {
        return {
            title: 'Hello',
            counting: false,
            array: [],
            index: 0,
            url: '',
            isShowProgress: false,
            progress: 0,
            registerSuccess: false,
            type: '',
            first_frame: '',
            avatar: '',
            name: '',
            datas: {},
            param: {},
        }
    },
    onLoad(e) {
        this.getData(this.$route.query.id)
    },
    mounted() {
        if (this.$route.path.indexOf('short') != -1) {
            this.param.creation_type = 'short'
        } else if (this.$route.path.indexOf('long') != -1) {
            this.param.creation_type = 'long'
        } else if (this.$route.path.indexOf('infomation') != -1) {
            this.param.creation_type = 'infomation'
        }
        this.param.creation_id = this.$route.query.id
        let that = this
        setTimeout(() => {
            ULink([
                {
                    id: 'usr11jeqgs9gdsoj',
                    data: that.param,
                    selector: '#xxl',
                    // timeout: 2000,
                    // useOpenInBrowerTips: 'default',
                    useOpenInBrowerTips: 'default',
                    lazy: true,
                    auto: false,
                },
            ])
        }, 100)
    },
    methods: {
        async getData(id) {
            let that = this
            try {
                const res = await getInfo(id)
                uni.hideLoading()
                // that.dataList = res.data
                if (res.code == 200) {
                    console.log(res.data)
                    that.first_frame = res.data.first_frame
                    that.avatar = res.data.author.avatar
                    that.name = res.data.author.name
                    that.url = res.data.media_urls[0]

                    this.datas = res.data
                } else {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                    })
                }
                // 保存数据
            } catch (err) {
                uni.hideLoading()
                console.log(err)
            }
        },

        checkCurrentTime(event) {
            const currentTime = event.mp.detail.currentTime
            console.log('当前播放时间：', currentTime)

            if (currentTime > 180) {
                this.startTimer()
            }

            // 在这里可以根据当前播放时间做相应的判断和处理
        },
        startTimer() {
            let that = this
            const videoContext = uni.createVideoContext('myVideo', this)
            // videoContext.play();
            videoContext.pause()
            videoContext.seek(0)
        },

        downloadFun() {
            //window.close() //关闭
            this.$refs.child.downloadFun()
        },
    },
}
</script>

<style>
.content {
    /* background: url('/static/Mask group@2x.png') 100% 100%; */
    /* background-image: url('/static/Mask group@2x.png'); */
    height: 100vh;
    width: 100vw;
    background-size: cover;
    background-position: 100%;
}

.btnBox {
    width: 80%;
    height: 90rpx;
    border-radius: 45rpx;
    background-color: #ff1c6d;
    line-height: 90rpx;
    text-align: center;
    color: white;
    margin: 0 auto;
}

.flex {
    display: flex;
    width: 100rpx;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    left: 80rpx;
    top: 20rpx;
    /* overflow: hidden; */
}

.downloadBox {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 500rpx;
}

.imgBox {
    position: absolute;
    left: 50rpx;
    top: 35rpx;
}

.contentBox {
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.3);
}

.imgBJ {
    width: 100vw;
    height: 100vh;
    position: fixed;
    /* background-color: #FF1C6D; */
    opacity: 0.4;
}

.flexFS {
    display: flex;
    align-items: center;
    color: #fff;
    /* justify-content: ; */

    /* overflow: hidden; */
}
</style>